<template>
  <div class="login">
    <Top title="密码登录" iconShow="1" v-if="selected == 1"></Top>
    <Top title="短信验证码登录" iconShow="1" v-else></Top>
    <!-- <div class="tabbar">
      <div class="tabbar-left" :class="{'selected':selected==1}" @click="pageOne">
        动态码登录
      </div>
      <div class="tabbar-right" :class="{'selected':selected==2}" @click="pageTwo">
        密码登录
      </div>
    </div> -->
    <header class="header-box">
      <img src="../assets/logo-login-2x.png" alt="">
    </header>
    <section class="form-box">
      <Changecode v-if="selected==1"></Changecode>
      <Password v-else></Password>
    </section> 
    <div class="link-box">
      <p class="fl type-login" @click="showVerifyLogin" v-if="selected == 2">密码登录</p>
      <p class="fl type-login" @click="showPwdLogin" v-else>短信验证码登录</p>
      <p class="fr forget-pwd" @click="linkForgetPwd">忘记密码？</p>
    </div>
  </div>
</template>
<script>
import Changecode from './login/ChangeCode'
import Password from './login/Password'
import Top from '../components/Header'
export default {
  name: 'login',
  data() {
    return {
      formdata: {
        tel: '',
        password: ''
      },
      title:'密码登陆',
      selected: 1
    }
  },
  mounted(){
    document.setTitle('登录');
    let sessionPhone = window.sessionStorage.getItem('phone')?window.sessionStorage.getItem('phone'):'';
    let channel = window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):'';
    window.localStorage.clear();
    window.sessionStorage.clear();
    window.sessionStorage.setItem('phone',sessionPhone);
    window.sessionStorage.setItem('channel',channel);
  },
  // 组件包含头部，密码登录，验证码登录
  components: { Top, Changecode, Password },
  methods: {
    // 当selected=1时，changeCode组件关闭，password组件则打开；反之则相反
    showVerifyLogin() {
      this.selected = 1;
    },
    showPwdLogin() {
      this.selected = 2;
    },
    linkForgetPwd(){
      this.$router.push({path:'/forgetPassword'});
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../scss/variable/base.scss';
.tabbar {
  margin-top: 1.2rem;
  width: 100%;
  height: 1.35rem;
  background: #fff;
  line-height: 1.35rem;
  font-size: 0.38rem;
  box-sizing: border-box;
  padding: 0 1.17rem;
  color: #000000;
  &-left {
    float: left;
    width: 35%;
    height: 1.24rem;
  }
  &-right {
    float: right;
    width: 35%;
    height: 1.24rem;
  }
}
.header-box{
  &>img{
    width: 40%;
    display: block;
    margin: 0 auto;
    margin-top: 1.6rem;
  }
}
.form-box{
  // margin-top: 1.2rem;
}

.link-box{
  width: 90%;
  margin: .35rem auto;
  padding-top: .35rem;
  clear: both;
  p{
    color: $primaryDeepColor;
  }
  .type-login{

  }
  .forget-pwd{

  }
}

.selected {
  color: $primaryColor;
  border-bottom: 4px solid $primaryColor !important;
}

.router-link-active {
  height: 1.24rem;
  width: 100%;
  display: inline-block;
  color: $primaryColor;
  border-bottom: 4px solid $primaryColor !important;
}
</style>


